<template>
  <div class="banner">
    <img v-for="(v, i) in bannerData" :key="i" v-show="n === i" :src="`/src/assets/image/${v}`" alt="" />
  </div>
</template>

<script setup>
import { bannerData } from "@/utils/config";
import { onMounted, onUnmounted, ref } from "vue";

let timer = null;
const n = ref(0);
const autoPlay = () => {
  timer = setInterval(() => {
    n.value++;
    if (n.value === bannerData.length) {
      n.value = 0;
    }
  }, 1500);
};

onMounted(() => {
  autoPlay();
});

onUnmounted(() => {
  timer && clearInterval(timer);
});
</script>

<style scoped></style>
